<template>
  <div class="userManageMain">
    <div class="btnGroup flex align-center">
      <el-button type="text" icon="el-icon-plus" @click="dialogVisible = true; type = 'add'">新建用户</el-button>
      <el-button type="text" icon="el-icon-edit" @click="dialogVisible = true; type = 'edit'">编辑用户</el-button>
      <el-button type="text" icon="el-icon-delete">批量删除</el-button>
    </div>
    <div class="tableBox">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column label="用户名称">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="200">
          <el-button
              type="text"
              icon="el-icon-delete"
              size="small"
              @click="deleteUser"
          >
            移除
          </el-button>
        </el-table-column>
      </el-table>
    </div>
    <!--新增用户-->
    <el-dialog
        :title="type === 'add' ? '新增用户' : '编辑用户'"
        :visible.sync="dialogVisible"
        width="600px"
    >
      <div class="userContent">
        <el-tabs v-model="activeName">
          <el-tab-pane label="常规" name="first"></el-tab-pane>
          <el-tab-pane label="高级" name="second"></el-tab-pane>
          <el-tab-pane label="服务器权限" name="third"></el-tab-pane>
          <el-tab-pane label="权限" name="fourth"></el-tab-pane>
        </el-tabs>
        <el-form ref="form" :model="form" label-width="100px" style="margin-top: 10px;">
          <el-form-item label="用户名">
            <el-input v-model="form.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="主机">
            <el-input v-model="form.name" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.name" type="password" size="small"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="form.name" type="password" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码过期策略">
            <el-select style="width: 100%;" v-model="form.name" size="small">
              <el-option label="DEFAULT" value="DEFAULT"></el-option>
              <el-option label="IMMEDIATE" value="IMMEDIATE"></el-option>
              <el-option label="INTERVAL" value="INTERVAL"></el-option>
              <el-option label="DEFAULT" value="DEFAULT"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-close">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="small" icon="el-icon-check">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'UserManage',
  data(){
    return {
      tableData: [{
        id: 1,
        name: 'root',
      }, {
        id: 2,
        name: 'dev',
      }],
      multipleSelection: [],
      dialogVisible: false,
      type: 'add',
      form: {
        name: ''
      },
      activeName: 'first'
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteUser(){
      this.$confirm('您确定要删除该用户吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功');
      }).catch(() => {
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.userManageMain{
  height: 100%;
  .btnGroup{
    height: 30px;
    ::v-deep .el-button{
      padding: 0;
    }
  }
  .tableBox{
    height: calc(100% - 30px);
  }
}
::v-deep .el-dialog__body{
  padding-top: 0;
  padding-bottom: 0;
}
</style>
